<template>
  <Layout>
    <Aside
      slot="aside"
      :data="menuData"
      @menu-item="handleMenuItem"
    ></Aside>
    <router-view></router-view>
  </Layout>
</template>

<script>
import Layout from "@/components/layout";
import Aside from "@/components/aside";

import { createAsideMenu } from "@/utils";

export default {
  components: {
    Layout,
    Aside
  },
  data() {
    return {
      menuData: []
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        this.menuData = createAsideMenu(
          "finance",
          route.name
        );
      }
    }
  },
  methods: {
    handleMenuItem({ item }) {
      if (item.pathName) {
        this.$router.push({
          name: item.pathName
        });
      }
    }
  }
};
</script>